<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>搜索_win</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<style>
		.aui-bar .aui-title {
			right: 40px;
			left: 90px;
		}

		input[type="text"]{
			width: 100%;
			height: 25px;
			-webkit-appearance: none;
			padding: 5px 20px 2px 15px;
			margin-bottom: 0;
			line-height: 23px;
			-webkit-user-select: text;
			background-color: #fff;
			border: 0px solid rgba(0, 0, 0, .2);
			border-radius: 100px;
			outline: none;
			color: #333333;
			
		}
		.clearBtn {
			width: 16px;
			height: 43px;
		    background: url(../image/clear.png) no-repeat center;
		    cursor: pointer;
		    position: absolute;
		    text-align: center;
		    background-size: 16px;
			position: absolute;
			top: 0px;
			right: 5px;
			z-index: 2;
		}
		.aui-tab-nav {
			background-color: #F3F3F3;
		}
	</style>
</head>
<body>
    <header class="aui-bar aui-bar-nav aui-bar-primary" id="aui-header">
	    <a class="aui-pull-left" tapmode onclick="api.closeWin()">
	        <span class="aui-iconfont aui-icon-left"></span>返回
	    </a>
        <div class="aui-title">
        	<form onsubmit="return search()" style="position: relative;">
        		<input id="search-txt" type="text" placeholder="请输入关键词"/><!-- input的类型使用text而不试用search的原因是，某些安卓机型可能会在表单最右侧显示以前不可控的清除按钮 -->
        		<i class="clearBtn" tapmode onclick="clearTxt()" style="display: none;"></i>
        	</form>
        </div>
    </header>
    <div class="aui-tab" id="aui-tab">
        <ul class="aui-tab-nav" id="aui-tab-nav">
            <li tapmode onclick="typeSwitch(this, 'search_software_list', 0)" data-frmname="search_software_list" class="active" id="type0">软件</li>
            <li tapmode onclick="typeSwitch(this, 'search_post_list', 1)" data-frmname="search_post_list" id="type1">问答</li>
            <li tapmode onclick="typeSwitch(this, 'search_blog_list', 2)" data-frmname="search_blog_list" id="type2">博客</li>
            <li tapmode onclick="typeSwitch(this, 'search_news_list', 3)" data-frmname="search_news_list" id="type3">新闻</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/OSChinaApi.js" ></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript">
	Zepto(function($){
		// input有内容的话显示清除按钮
	    $('#search-txt').on('input', function() {
	        var $this = $(this);
	        if ($this.val() == '') {
	            $('.clearBtn').hide();
	        } else {
	            $('.clearBtn').show();
	        }
	    });
	});

    apiready = function(){
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header); 
        var headerPos = $api.offset(header);
		var auiTab = $api.byId('aui-tab');
		var auiTabPos = $api.offset(auiTab);
		
		api.openFrameGroup ({
            name: 'search',
            scrollEnabled:true,
            rect:{
				x:0,             //左上角x坐标
				y:headerPos.h + auiTabPos.h,             //左上角y坐标
				w:'auto',           //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度
				h:'auto',          //高度，若传'auto'，页面从y位置开始自动充满父页面高度
			},
            index:0,
            preload:4,	// 必须4个页面全部预加载
            frames:
            [{
                name: 'search_software_list', 
                url: './search_software_list.html', 
                bounces:true
            },{
                name: 'search_post_list', 
                url: './search_post_list.html', 
                bounces:true
            },{
                name: 'search_blog_list', 
                url: './search_blog_list.html', 
                bounces:true
            },{
                name: 'search_news_list', 
                url: './search_news_list.html', 
                bounces:true
            }]
        }, function(ret, err){
	        var aui_tab_nav = $api.byId('aui-tab-nav');
	        var aui_tab_nav_act = $api.dom(aui_tab_nav, '.aui-tab-nav li.active');
	        $api.removeCls(aui_tab_nav_act, 'active');
	        
            var name = ret.name;
            var index = ret.index;
            
            nowTabIndex = index;
            
			$api.addCls($api.byId('type'+index), 'active');
	        // iOS点击状态栏可返回顶部
			$("ul li").each(function(index){
				var frmname = $(this).data("frmname");
				api.setFrameAttr({
				    name: frmname,
				    scrollToTop: false
				});
			});
			api.setFrameAttr({
			    name: name,
			    scrollToTop: true
			});
        });
    };
    
    function typeSwitch(obj, name, index){
    
    	// 点击选项卡返回顶部
    	if(index == nowTabIndex){
			api.execScript({
			    name: 'search_win',
			    frameName: name,
			    script: 'scroll();'
			});
    	}
    
        var aui_tab_nav = $api.byId('aui-tab-nav');
        var aui_tab_nav_act = $api.dom(aui_tab_nav, '.aui-tab-nav li.active');
        $api.removeCls(aui_tab_nav_act, 'active');
        $api.addCls(obj, 'active');
        api.setFrameGroupIndex({
            name: 'search',
            index: index
        });
	        // iOS点击状态栏可返回顶部
			$("ul li").each(function(index){
				var frmname = $(this).data("frmname");
				api.setFrameAttr({
				    name: frmname,
				    scrollToTop: false
				});
			});
			api.setFrameAttr({
			    name: name,
			    scrollToTop: true
			});
    }
    
    // 清除表单内容
    function clearTxt(){
    	$api.val($api.byId('search-txt'),'');
    	$('.clearBtn').hide();
    	$('#search-txt').focus();	// 获取焦点
    }
    
    // 回车搜索
    function search(){
    	$('#search-txt').blur();	// 移除焦点
    	var keyword = $api.val($api.byId('search-txt'));
    	if( keyword.length>0 ){
			api.sendEvent({		// 广播搜索事件，让4个页面同时搜索
			    name: 'search',
			    extra: {keyword:keyword}
			});
    	}
    	return false;
    }
    

</script>
</html>